@import '../../styles/index';

.resize-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background-color: rgba(50, 50, 50, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &.top {
    height: 10px;
    border-top: 1px solid var(--border);
    margin-top: -8px;
    margin-left: -8px;
    cursor: row-resize;
    .resize-line {
      height: 4px;
      width: 25px;
    }
  }
  &.right {
    width: 10px;
    left: 0px;
    margin-right: -8px;
    top: 0px;
    cursor: col-resize;
    .resize-line {
      height: 25px;
      width: 4px;
    }
  }
  &.left {
    width: 10px;
    right: 0px;
    margin-left: -8px;
    top: 0px;
    cursor: col-resize;
    .resize-line {
      height: 25px;
      width: 4px;
    }
  }
  &.active {
    background-color: rgba(50, 50, 50, 0.5);
    cursor: default;
  }
  &.unset {
    z-index: 1 !important;
  }
  &:hover {
    .resize-line {
      background-color: var(--title);
    }
  }
}
.resize-line {
  .center();
  .radius(0.5);

  background-color: var(--paragraph);
}
